<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情表</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
</head>

<style>
    .handler {
        color: #a59191;
        font-size: 12px;
    }

    .tdAdapt {
        font: 14px/150% "微软雅黑" !important;
        word-wrap: break-word;
        word-break: break-all;
        color: #525252;
    }

    .tdTible {
        font: 15px/150% "微软雅黑" !important;
        color: #323131;
    }
</style>

<body>
<div style='layout-grid:15.6pt;'>
    <div>
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">描述</li>
                <li>附件</li>
                <li>视频</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div>这是一段对于本次协作的部分描述</div>
                </div>
                <div class="layui-tab-item">
                    <ul class="layui-timeline">
                        <li class="layui-timeline-item">
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title"><a href="#">附件1.pdf</a></h3>
                            </div>
                        </li>
                        <li class="layui-timeline-item">
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title"><a href="#">附件2.pdf</a></h3>
                            </div>
                        </li>
                        <li class="layui-timeline-item">
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title"><a href="#">附件3.pdf</a></h3>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="layui-tab-item">
                    <div>当前播放的视频为 视频1.mp4</div>
                    <video width="70%" height="100%" controls>
                        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" id="myVideo">
                        您的浏览器不支持Video标签。
                    </video>
                    <div id="videoList" style="float: right ;margin-right: 3%;width: 20%;height: 200px">
                        <ul class="layui-timeline">
                            <li class="layui-timeline-item">
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title"><a href="#">视频1.mp4</a></h3>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title"><a href="#">视频2.mp4</a></h3>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title"><a href="#">视频3.mp4</a></h3>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script>
    function getParentData(parentData) {
        getCase(parentData.caseId)
    }

    function returnData(inputData) {
        var data = {
            "height": $("#timeline").height() + 150
        }
        $(window.parent.processReturnData(data));
    }
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>

</html>